<template>
  <div class="app-container">
    <div>
      <h3>已选择的标签</h3>
      <div class="chosen-tags">
        <el-button
            v-for="tag in chosenTags"
            :key="tag.tagId"
            type="primary"
            size="mini"
            @click="removeTag(tag)"
        >
          {{ tag.tagName }} <i class="el-icon-delete"></i>
        </el-button>
      </div>
    </div>

    <!-- 可选标签 -->
    <div>
      <h3>可选标签</h3>
      <div class="available-tags">
        <el-button
            v-for="tag in tagList"
            :key="tag.tagId"
            type="primary"
            size="mini"
            @click="addTag(tag)"
        >
          {{ tag.tagName }} <i class="el-icon-plus"></i>
        </el-button>
      </div>
    </div>

    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />
  </div>
</template>

<style scoped>
/* 为已选择标签和可选标签按钮容器添加间距 */
.chosen-tags, .available-tags {
  display: flex;
  flex-wrap: wrap; /* 让按钮在空间不足时自动换行 */
  gap: 10px; /* 设置按钮之间的间距 */
  margin-bottom: 20px; /* 为每组按钮添加底部间距 */
}

.chosen-tags el-button,
.available-tags el-button {
  margin: 5px; /* 每个按钮之间的外边距 */
}
</style>

<script setup>
import {ref, reactive, toRefs} from 'vue';
import {listUnChosenTag, listMyTag, addMyTag, removeMyTag} from "@/api/match/MyTag";

const {proxy} = getCurrentInstance();

const tagList = ref([]); // 未选择的标签列表
const chosenTags = ref([]); // 已选择的标签列表
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  tagName: null,
});

// 获取标签列表（包含已选择和未选择标签）
function getList() {
  loading.value = true;

  // 查询当前用户已选择的标签
  listMyTag().then(response => {
    chosenTags.value = response.rows || [];
  });

  // 查询当前用户未选择的标签
  listUnChosenTag(queryParams).then(response => {
    tagList.value = response.rows || [];
    total.value = response.total || 0;
    loading.value = false;
  });
}

// 搜索按钮操作
function handleQuery() {
  queryParams.pageNum = 1;
  getList();
}

// 添加标签操作
function addTag(tag) {
  addMyTag(tag).then(response => {
    if (response.code === 200) {
      // 成功后更新标签列表
      getList();
    }
  });
}

// 删除标签操作
function removeTag(tag) {
  const tagId = tag.tagId;
  removeMyTag(tagId).then(response => {
    if (response.code === 200) {
      // 成功后更新标签列表
      getList();
    }
  });
}



// 初次加载
getList();
</script>
